<template>
  <!-- 外围最大的盒子 -->
  <div class="pathcompile">
    <!-- 左侧列表栏 -->
    <div class="box">
      <div class="myListOne">
        <van-list class="myList">
          <van-cell
            title="可行区域列表"
            style="background-color: #1a1c25; color: #ffffff"
          />
          <van-cell
            @click="examine(item)"
            v-for="(item, index) in editors"
            :class="[
              'tr-color-1' + (index % 2),
              { active: activeIndex === item.id },
            ]"
            :title="item.id"
            :key="index"
            ><van-icon name="close" size="28" color="#fff" @click="delet(item)"
          /></van-cell>
        </van-list>
        <van-cell
          id="new"
          title="+"
          style="background-color: #e7f7f7; color: #26d473"
          @click="establish"
        />
      </div>
      <div class="zhouimg">
      <img src="../../assets/zhou3.png" alt="">
    </div>
      <!-- 右侧内容区域 -->
      <conent
        :editors="List"
        @geteditors="geteditors"
        :complete="editors"
        @empty="empty"
        ref="child"
        :newshow="newshow"
        @newquit="newquit"
        @activepathcompiles="activepathcompilesitem"
      ></conent>
    </div>
  </div>
</template>

<script>
//导入确认框
import { Dialog } from "vant";
//导入yaml格式进行转换
import yaml from "js-yaml";
//导入封装好的路线编辑数据接口
import { geteditorsApi ,popeditorsApi} from "@/api/editors";
//导入内容区域组件
import conent from "./components/conent.vue";
export default {
  // 注册内容组件
  components: {
    conent,
  },
  data() {
    return {
      activeIndex: 0, //下标选择
      editors: [], //定义一个数组用来保存获取到的数据
      List: [], //点击列表保存点击那一项的数据
      newshow: false,
    };
  },

  methods: {
    //绘图新增按钮事件
    establish() {
      // this.$refs.child.huitu()
      //提示用户
      this.$toast.success("请绘制路线");
      // 把newshow中改为true
      this.newshow = true;
      // 调用子组件中的事件进行绘图
      // this.$refs.child.son();
    },
    //删除按钮事件
    delet(item) {
      console.log(item);
      //加入确认框提示
      Dialog.confirm({
        title: "删除路线编辑",
        message: `您确定要删除id为${item.id}的路线嘛?`,
      })
        .then(async () => {
          try{
              //发送删除路线的接口请求
          let res = await popeditorsApi({
            id: item.id, //传入id
          });
          //提示用户删除成功
          this.$toast.success("删除成功");
          // 调用方法刷新页面数据
          this.geteditors()
          this.List = ''
          }catch{
            // 提示用户删除失败
            this.$toast.fail('删除失败')
          }
        
        })
        .catch(() => {
          //提示用户
          this.$toast.fail("取消成功");
        });
    },

    //子组件中自定义事件修改父组件值
    newquit(val) {
      // 把子组件传过来的值赋值给newshow
      this.newshow = val;
    },

    //注册列表每一项的点击事件
    examine(item) {
      // 把对应的id传入对应的变量作为高亮的类名
      this.activeIndex = item.id;
      this.List = item; //保存点击的那一项
      console.log(this.List,'点击后');
    },
    activepathcompilesitem(item) {
      this.examine(item); //保存点击的那一项
    },


    async geteditors() {
      let res = await geteditorsApi(); //发送请求获取数据
      if (res.data.msg != "successed") {
        this.editors = yaml.load(res.data); //定义一个新的变量
      }
      console.log(this.editors, "路线编辑");
    },

    //  子组件传入的事件
    empty(val) {
      // 把点击的那一项数据清空
      this.List = val;
    },
  },
  created() {
    this.geteditors(); //一进入页面就调用该方法获取路线编辑区域
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar__content {
  background-color: skyblue;
  height: 60px !important;
}
.van-nav-bar__title {
  font-size: 24px !important;
  color: white !important;
}
.pathcompile {
  position: fixed;
  top: 70px;
  width: 100%;
  height: 100%;
  background-color: #12151a;
  .box {
    height: 100vh;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    .myimg {
      flex: 1;
    }
    // .myListOne {
    //   // width: 320px !important;
    // }
    .myList {
      height: 300px;
      overflow-x: hidden;
      overflow-y: auto;
      .myList::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
.van-cell {
  color: #fff;
  font-size: 18px;
  background-color: #1a1c25 !important ;
  margin-left: 10px;
  // margin-right: 60px;
  margin-top: 3px;
  width: 180px !important;
  height: 50px;
  text-align: center;
  &.active {
    color: #00c3c3 !important;
    background-color: #030305 !important;
    position: relative;
    &::before {
      content: "";
      width: 5px;
      height: 60px;
      background-color: skyblue;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .van-cell__title {
    span {
      font-size: 20px;
      font-weight: 700;
      line-height: 32px;
    }
  }
}

::v-deep .boxList .van-form .van-cell[data-v-40d3e1c4] {
  margin-left: 20px !important;
  background-color: white !important;
}

#new {
  .van-cell__title {
    background-color: #1a1c25 !important;
    border-radius: 5px;
    span {
      font-size: 44px !important;
      padding: 5px;
      font-weight: 400 !important;
    }
  }
}
.pathcompile{

/deep/.keyboard{
    margin: 0px;
    margin-right: 200px;
    
    padding: 0;
    list-style: none;
    user-select: none;
    background: #fff;
    box-shadow: 0 -3px 8px 5px #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 42px 0px;
    width: 810px;
    height: 150px;
    li{
      text-indent: 0;
      color: #000;

        float: left;
        text-align: center;
        margin: 0 10px 10px 0;
        width: 70px;
        height: 25px;
        line-height: 25px;
        background: #fff;
        border-radius: 15px;
        font-size: 18px;
        font-weight: 500;
        box-shadow: 0 3px 6px 0px #cac9c9;
    }
    li:nth-child(n+11){
        margin-left: -2px!important;
    }
    li:nth-child(-n+27):nth-child(n+20){
        margin-left: 5px!important;
    }
    li:nth-child(38){
      width: 150px;
      text-indent: 2.5em;
    }
}
}
.pathcompile {
  height: 100%;
  .one {
    overflow: hidden;
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .two {
    margin-top: 20px;
    height: 180px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /deep/::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background: #33333300;
    /**/
  }
  /deep/::-webkit-scrollbar-track {
    background: rgb(239, 239, 239, 0);
    border-radius: 2px;
  }
  /deep/::-webkit-scrollbar-thumb {
    background: rgba(192, 176, 33);
    border-radius: 10px;
  }
  /deep/::-webkit-scrollbar-thumb:hover {
    background: #33333300;
  }
  /deep/::-webkit-scrollbar-corner {
    background: #33333300;
  }
  /deep/::-webkit-scrollbar-track {
    background: #33333300;
  }
}
</style>
